<template>
	<view>
		<view class="title">征信顾问</view>
		<view class="box" v-for="(item,index) in list" :key="index">
			<view class="oneLine">
				<view class="left">
					<image :src="item.img" mode=""></image>
					<view style="display:flex;flex-direction: column;">
						<view class="left_one">{{item.name}}</view>
						<view class="left_two">{{item.areaName}}</view>
					</view>
				</view>
				<view class="right" @click="onclick(item)" :class="{'distraction':!item.pay}">{{item.pay?"咨询":"付费咨询"}}
				</view>
			</view>
			<view class="describe">
				{{item.info}}
			</view>
		</view>
		<u-loadmore v-if="list.length > 0" :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
			:nomore-text="nomoreText" :line='true' />
		<image v-if="list.length == 0" class="NoData" src="https://img.wilmer.com.cn/admin/2024/3-20/WechatIMG19.jpg"
			mode=""></image>
		<view :style="{height: safeArea + 'px'}"></view>

		<!-- 二维码 -->
		<u-popup :show="Qrshow" mode="center" :round="10" bgColor='transparent' zIndex='10075' @close="Qrclose"
			@touchmove.stop.prevent="moveHandle">
			<view class="box-img">
				<image src="https://img.wilmer.com.cn/admin/2024/4-3/1.jpg" mode=""></image>
				<image @click="handleLongPress" style="width: 280rpx;height: 280rpx;" :src="qrCode" mode="">
				</image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getCon,
		payCon,
		consultants
	} from '@/api/system/bank_request.js'
	export default {
		data() {
			return {
				params: {
					pageNum: 1,
					pageSize: 10
				},
				safeArea: 0, // 底部安全距离
				list: [],
				total: 0,
				Qrshow: false,
				qrCode: '',
				payForm: {
					code: '',
					prise: '',
					conId: ''
				},
				flag: true, // 上拉加载开关 防止一次触底查询多次问题,防止数据查完后触底还调接口问题
				status: 'loadmore', // loading || loadmore
				loadingText: '努力加载中',
				loadmoreText: '轻轻上拉,加载更多数据',
				nomoreText: '实在没有了',
			}
		},
		onLoad(option) {
			if (option.type == '查征信') {
				uni.setNavigationBarTitle({
					title: '一对一帮你查征信'
				});
			} else {
				uni.setNavigationBarTitle({
					title: '一对一帮你养征信'
				});
			}
			this.getList()
		},
		onShow() {
			// 获取底部安全距离
			let res = uni.getSystemInfoSync();
			this.safeArea = res.screenHeight - res.safeArea.bottom;
		},
		onReachBottom() {
			let that = this
			if (that.total > that.list.length) {
				that.status = 'loading'
				if (!this.flag) {
					that.getlist()
					uni.stopPullDownRefresh()
				}
			} else {
				this.status = 'nomore'
			}
		},
		methods: {
			getList() {
				this.$modal.loading("加载中")
				getCon({
					type: "征信顾问"
				}).then(res => {
					setTimeout(() => {
						uni.hideLoading();
					}, 500)
					this.list = res.rows
					this.total = res.total
					if (res.total < 10) {
						this.status = 'nomore'
						this.flag = true
					} else {
						this.status = 'loadmore'
						this.flag = false
						this.params.pageSize = this.params.pageSize + 10
					}
				})
			},
			moveHandle() {
				return false;
			},
			Qrclose() {
				this.Qrshow = false
			},
			handleLongPress(e) {
				uni.previewImage({
					urls: [this.detal.qrCode],
					current: 0,
					indicator: 'default',
					loop: false,
					success: res => {
						console.log('res', res);
					},
					fail: err => {
						console.log('err', err);
					}
				});
			},
			onclick(item) {
				if (item.pay) {
					consultants(item.id).then(res => {
						this.qrCode = res.data.qrcode
						this.Qrshow = true
					})
				} else {
					this.pay(item)
				}
			},
			pay(item) {
				this.payForm.conId = item.id
				this.payForm.prise = item.prise
				this.$modal.loading("加载中")
				let that = this
				uni.login({
					"provider": "weixin",
					success: (res) => {
						this.payForm.code = res.code
						payCon(that.payForm).then(res => {
							// 参考示例。
							let sign = JSON.parse(res.data);
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: sign.timeStamp,
								nonceStr: sign.nonceStr,
								package: sign.package,
								signType: sign.signType,
								paySign: sign.paySign,
								success: function(res) { // 支付成功的回调
									uni.hideLoading();
									consultants(item.id).then(resolve => {
										that.qrCode = resolve.data.qrcode
										that.Qrshow = true
									})
								},
								fail: function(err) { // 用户取消支付的回调
									uni.showToast({
										title: '你已取消支付',
										icon: 'none'
									})
								}
							});

						})
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.title {
		font-family: PingFang SC;
		font-size: 40rpx;
		font-weight: 500;
		color: #666666;
		margin-left: 52rpx;
		margin-top: 32rpx;
	}

	.box {
		width: 686rpx;
		padding-top: 36rpx;
		padding-bottom: 68rpx;
		box-shadow: 0px 0px 6px 0px #9B9B9B40;
		background: #FFFFFF;
		margin: 20rpx auto 0;

		.oneLine {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				image {
					width: 100rpx;
					height: 100rpx;
					margin: 0 26rpx;
					border-radius: 50%;
				}

				.left_one {
					font-family: PingFang SC;
					font-size: 40rpx;
					font-weight: 500;
					color: #333333;
					line-height: 24px;
				}

				.left_two {
					font-family: PingFang SC;
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					line-height: 14px;
					margin-top: 12rpx;
				}
			}

			.right {
				margin-right: 24rpx;
				width: 172rpx;
				height: 80rpx;
				border-radius: 22px;
				background: #319AF5;
				font-family: PingFang SC;
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.distraction {
				background: #E0A134;
			}
		}

		.describe {
			width: 616rpx;
			margin: 30rpx auto 0;
			font-family: PingFang SC;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 1.2;
			color: #666666;
			text-align: left;
		}
	}

	.NoData {
		display: block;
		width: 400rpx;
		height: 318rpx;
		margin: 40rpx auto 0;
	}

	.box-img {
		width: 480rpx;
		height: 368rpx;
		overflow: hidden;
	}

	.box-img image:nth-child(1) {
		width: 480rpx;
		height: 368rpx;
	}

	.box-img image:nth-child(2) {
		position: absolute;
		left: 50%;
		z-index: 999;
		transform: translateX(-50%);
		margin-top: 10rpx;
	}
</style>